<template>
	<view style="padding: 0 20rpx;margin-bottom: 170rpx;">
		<view class="xxl mt20">
			待归还
			<template v-if="info.order_status == 6 && info.return_goods.status==2">
				<text class="ml10 mr10">|</text>审核失败
			</template>
		</view>
		<view class="mt20 row">
			订单号：{{info.order_sn}}
			<image @tap="toCopy(info.order_sn)" src="../../static/images/copy_icon_white.png" style="width: 30rpx;"
				mode="widthFix">
			</image>
		</view>
		<view class="card">
			<view class="mb20">
				配送门店
			</view>
			<view class="row" style="gap: 20rpx;">
				<u-image :src="info.shop_logo" border-radius="20" mode="aspectFill" width="160" height="160"></u-image>
				<view class="flex1 column-around" style="align-items: start;gap: 30rpx;">
					<view class="xl lighter">
						{{info.shop_address}}
					</view>
					<view class="row-between" style="width: 100%;">
						<view class="row">
							<u-icon name="map"></u-icon>
							<text class="ml10" style="color: var(--primary-color);">距您{{info.shop_juli}}</text>
						</view>
						<view class="row">
							<image src="../../../static/images/icon_7.png" mode="widthFix" style="width: 30rpx;">
							</image>
							<text class="ml10 mr20 lighter">{{info.shop_tel}}</text>
							<image src="../../../static/images/icon_6.png" mode="widthFix" style="width: 40rpx;"
								@tap="callPhone(info.shop_tel)">
							</image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="card">
			<view v-if="info.order_status == 6 && info.return_goods.status==2" class="mb20"
				style="padding: 20rpx;background-color: #f5f9fa;">
				失败原因：<text style="color: #dc503f;">{{info.return_goods.beizhu}}</text>
			</view>
			<view class="row" style="gap: 20rpx;">
				<u-image :src="info.image" border-radius="20" mode="aspectFill" width="120" height="120"></u-image>
				<view class="flex1 column-center" style="gap: 20rpx;align-items: start;">
					<text>{{info.goods_name}}</text>
					<text class="muted xs">下单时间：{{info.create_time}}</text>
				</view>
			</view>
			<view class="mt20" style="padding: 20rpx;background-color: #f5f9fa;">
				<view class="row-between lighter">
					<view class="row">
						租期剩余：
						<template v-if="info.countdown.status==1">
							<u-count-down :timestamp="info.countdown.now_time" :show-days="false" color="#FF2C3C"
								separator-color="#FF2C3C" separator="zh" bg-color="transparent"
								font-size="24"></u-count-down>
						</template>
						<template v-else-if="info.countdown.status==2">
							<text style="color: #dc503f;">{{info.countdown.differ}}</text>
						</template>
					</view>
					<view class="row">
						租期共：{{info.goods_info}}
					</view>
				</view>
				<view class="row xs mt20 muted">
					应归还时间：
					<text style="color: #dc503f;">{{info.end_time}}</text>
				</view>
			</view>
			<view class="mt30 mb30" style="width: 100%;height: 2rpx;background-color: #eee;"></view>
			<view class="xxl">
				归还详情
			</view>
			<view class="mt20 row-between wrap">
				<view class="mb20" style="width: 200rpx;">
					<u-upload max-count="1" ref="upload" :custom-btn="true" width="200" :multiple="false"
						:auto-upload="false" height="200" del-bg-color="#dc503f" :file-list="video_file"
						:limit-type="['mp4','wav','webm','ogg','wmv','avi','flv']" @on-choose-complete="uploadFile"
						:show-progress="false" @on-remove="removeFile">
						<view style="width: 200rpx;" slot='addBtn'>
							<image src="../../static/images/upload_video.png" mode="widthFix" style="width: 100%;">
							</image>
						</view>
					</u-upload>
					<view style="text-align: center;" class="mt10">产品使用视频</view>
				</view>
				<view v-for="(item,index) in numberList" :key="index" class="mb20" style="width: 200rpx;">
					<u-upload :ref="'upload'+index" :limit-type="['jpg','png','gif','jpeg']" max-count="1"
						:multiple="false" :auto-upload="false" :custom-btn="true" width="200" height="200"
						:index="index" :show-progress="false" :file-list="file_list[index]" del-bg-color="#dc503f"
						@on-choose-complete="uploadFile" @on-remove="removeFile">
						<template slot='addBtn'>
							<image src="../../static/images/upload_img.png" mode="widthFix" style="width: 200rpx;">
							</image>
						</template>
					</u-upload>
					<view style="text-align: center;" class="mt10">{{item}}</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<u-button shape="circle" type="error" :custom-style="{'backgroundColor':'#dc503f'}" @click="toConfirm">
				确认归还
				<template v-if="info.order_status == 6 && info.return_goods.status==2">
					/修改
				</template>
			</u-button>
		</view>
	</view>
</template>

<script>
	import {
		copy,
		uploadFile
	} from '../../../utils/tools';
	import {
		getRevertStone,
		postRevertStone
	} from '../../../api/user';
	const numberList = [
		'产品全图',
		'产品正面图',
		'产品背面图',
		'产品左侧图',
		'产品右侧图',
	]
	export default {
		data() {
			return {
				numberList: numberList,
				images: (new Array(5)).fill(null),
				video_url: null,
				info: null,
				id: 0,
				file_list: [],
				video_file: null,
			};
		},
		onLoad(options) {
			const id = options.id;
			this.id = id;
			const lat = uni.getStorageSync("City_lat");
			const lng = uni.getStorageSync("City_lng");
			getRevertStone({
				id,
				lng,
				lat
			}).then(res => {
				if (res.code !== 1) return this.$toast({
					title: res.msg
				});
				this.info = res.data;
				const data = res.data.return_goods;
				if (data && data.status == 2) {
					this.video_file = [{
						url: data.video
					}];
					this.video_url = data.video
					this.file_list = data.pics.map(v => [{
						url: v.image
					}])
					this.images = data.pics.map(v => v.image)
				}
			})
		},
		methods: {
			toCopy(text) {
				copy(text)
			},
			callPhone(val) {
				uni.makePhoneCall({
					phoneNumber: val
				})
			},
			uploadFile(lists, index) {
				if (lists.length == 0) return;
				const item = lists[0]
				uploadFile(item.url).then(res => {
					console.log(res)
					if (index === '') {
						this.video_url = res.url;
					} else {
						this.images[index] = res.url;
					}
				}).catch(res => {
					this.$toast({
						title: '上传失败，请重试'
					})
					if (index === '') {
						this.$refs['upload'].clear();
					} else {
						const ref = 'upload' + index;
						this.$refs[ref][0].clear();
					}
				})
			},
			removeFile(index, lists, name) {
				if (name === '') {
					this.video_url = null;
				} else {
					this.images[name] = null;
				}
			},
			toConfirm() {
				if (!this.video_url) return this.$toast({
					title: '请上传使用视频'
				});
				if (this.images.some(v => v === null)) return this.$toast({
					title: '请上传全部图片'
				});
				postRevertStone({
					id: this.id,
					goods_image: this.images,
					video: this.video_url
				}).then(res => {
					if (res.code !== 1) return this.$toast({
						title: res.msg
					})
					if (res.data == 1) {
						this.$toast({
							title: '提交成功'
						}, {
							tab: 3,
							url: 1
						})
						uni.$emit('reload-list')
					} else if (res.data == 2) {
						uni.navigateTo({
							url: '/package_user/pages/to_give_back_express/to_give_back_express?id=' + this
								.id
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #dc503f;
		color: white;

		.card {
			border-radius: 14rpx;
			background-color: white;
			color: #333;
			padding: 20rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
		}

		.footer {
			position: fixed;
			bottom: 0%;
			width: 100%;
			left: 0;
			background-color: white;
			padding: 20rpx 20rpx env(safe-area-inset-bottom);
		}
	}

	.u-list-item {
		margin: 0 !important;
	}
</style>